<template>
    <div class="video">
        <meta name="referrer" content="never" />
        <div class="video-box" ref="videoBox">
            <div class="tools" ref="tools" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
                <div class="video-item" v-for="(item, index) in videoList" :key="index">
                    <video ref="video" :src="item.web_url" controls loop autoplay></video>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Video",
    data() {
        return {
            videoList: null,
            toolsDom: null,
            videoBox: null,
            video: null,
            startX: null,
            startY: null,
            moveX: null,
            moveY: null,
            // 滚动次数标识符
            count: 0,
            // 定义一个请求页码
            page: 1,
        };
    },
    created() {
        this.getVideo();
    },
    mounted() {
        setTimeout(() => {
            // this.$nextTick(() => {

            this.toolsDom = this.$refs.tools;
            this.videoBox = this.$refs.videoBox;
            this.video = this.$refs.video;

            // });
        }, 1000);
    },
    methods: {
        getVideo() {
            this.axios({
                method: "get",
                baseURL: "/api",
                // url: "https://apis.netstart.cn/qiushi/article/list/video",
                url: "https://apis.netstart.cn/xpc/article/11757597/next",
                // params: {
                //     page,
                //     count: 12,
                // },
            })
                .then((res) => {
                    this.videoList = res.data.data.list;
                })
                .catch((err) => {});
        },
        touchstart(e) {
            this.startX = e.changedTouches[0].pageX;
            this.startY = e.changedTouches[0].pageY;
            //
        },
        touchmove(evt) {
            this.moveX = evt.changedTouches[0].pageX;
            this.moveY = evt.changedTouches[0].pageY;
            //

            // 获取移动的距离
            let moveDifference = evt.targetTouches[0].pageY - this.startY;
            //

            // this.toolsDom.style.transform = `translateY(${moveDifference}px)`;
            //
            //
            // 把移动的距离赋值给top
            this.toolsDom.style.top = `${moveDifference}px`;
            //
        },
        touchend() {
            this.count++;
            let offsetY = this.count * -617 + "px";

            // 松手后移动距离大于盒子高度一半就滑动

            if (-parseFloat(this.toolsDom.style.top) >= this.videoBox.clientHeight / 3) {
                this.toolsDom.style.top = 0;
                this.toolsDom.style.transform = `translateY(${offsetY})`;
                // 不到一半
            } else {
                // 防止在滑动但判断未到下一个视频后,下一次条件成功导致跳视频
                this.count--;
                // 回到原视频
                this.toolsDom.style.top = 0;
            }

            if (parseFloat(offsetY) < -6787) {
                this.page++;

                // 重置数据,使能够重新滚动
                this.toolsDom.style.transform = `translateY(0)`;
                offsetY = 0;
                this.count = 0;
                // this.getVideo(this.page);
            }
            // 移动的距离
            // if (this.startY - this.moveY > 0) {
            //     this.toolsDom.style.transform = `translateY(${offsetY})`;
            //     if (parseFloat(offsetY) < -6787) {
            //         // 重置数据,使能够重新滚动
            //         this.toolsDom.style.transform = `translateY(0)`;
            //         offsetY = 0;
            //         this.count = 0;
            //     }
            //
            //
            //     this.video[this.count].play();
            //
            // }
        },
    },
};
</script>

<style lang="less" scoped>
.video {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: calc(100% - 50px);
    background-color: #f7f8f8;
    overflow-y: auto;
    .video-box {
        width: 100%;
        height: 100%;
        overflow: hidden;
        .tools {
            height: 1200%;
            transform: translateY(0);
            transition: transform 0.5s;
            position: relative;
            top: 10px;
            left: 0;
            .video-item {
                height: 617px;
                position: relative;
                top: -10px;
                video {
                    width: 375px;
                    height: 617px;
                }
            }
        }
    }
}
</style>
